<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :before-close="handleClose"
  >
    <slot></slot>
    <span slot="footer" class="dialog-footer">
      <el-button  type="primary" @click="handleSave">保存</el-button>
      <el-button @click="handleClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
    props: {
        title: {
            type: String
        },
        dialogVisible: {
            type: Boolean,
            default: false
        },
        width: {
            type: String,
            default: "30%"
        }
    },
    methods: {
        handleClose() {
            this.$emit("handleDialogVisible", false);
        },
        handleSave() {
            this.$emit("handleCommit");
        }
    },
    computed: {
        visible: {
            get() {
                return this.dialogVisible;
            },
            set(val) {
                this.$emit("update:dialogVisible", val);
            }
        }
    }
};
</script>

<style scoped>
    ::v-deep .el-dialog__header {
        font-weight: bolder;
    }
</style>
